
<template>
    <h3>可折叠面板</h3> 
    <!-- 面板区域 -->
        <div class="panel">
            <!-- 标题区域 -->
             <div class="title">
                <h4>自由与爱情</h4>
                <span class="btn" v-on:click="visible=!visible">收起</span>
             </div>
            <!-- 主题内容区域 -->
             <div class="container" v-show="visible">
                <p>生命诚可贵,</p>
                <p>爱情价更高.</p>
                <p>若为自由故,</p>
                <p>两者皆可抛.</p>
             </div>
        </div>
</template>


<script setup>
import{ref} from 'vue'
const visible=ref(false);
        
</script>



<style lang="scss">
//如果指明了lang="scss"之后项目运行不了,需要安装sass,在小黑窗口执行npm i sass -D,安装后重新启动项目
    body{
        background: #add;
    }
    #app{
        width: 400px;
        border: 4px solid green;
        background: #fff;
        padding: 1em 2em 2em;
        margin: 20px auto;
        //为元素添加阴影效果
        box-shadow: 3px 3px 3px rgba(0,0, 0.5);
        //添加圆角矩
        border-radius: 1em;
        h3{
            text-align: center;
        }

    }
    .panel{
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border:1px solid #ccc;
            padding : 0 1em;
            h4{
                margin: 0;
                line-height: 2;
            }
            .btn{
                cursor: pointer;
            }
            
        }
        .container{
            border:1px solid #ccc;
            padding: 0 1em;
            // 顶部边框设置为0
            border-top-color: transparent;
            
        }
        
    }

</style>